<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全屏展示</title>
</head>
<link href="<%=path %>/hplus/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=path %>/hplus/css/animate.min.css" rel="stylesheet">
<link href="<%=path %>/hplus/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<style>
  .col-sm-1{
        padding-right: 0;
    }
  body{
		font-size:12px;
		font-family:"宋体";
	}
  .label1{
  		font-size:15px;
  		margin-left:10px;
  		margin-top:15px;
  }
  .label2{
  		font-size:12px;
  		margin:10px;
  		margin-top:5px;
  }
  .row{
  		background-color:#fff;
  		margin:10px;  		
  }
  .click-count{
  		font-size:16px;
  		color:#1ab394;
  }
  .point{
  		width:100%;
  		height:100%;
  		margin-top:-20px;
  }
  </style>
<body class="gray-bg">
	<div class="from-group">
		<div class="row">
				<label class="col-sm-11" style="margin-top:20px;color:#FF892F;font-size:16px;">当前展示节点数：<span class="show-point">500</span></label>
		     	<div class="point" id="point"></div>
		</div>
	</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.1/echarts.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
var aemId = getQueryString("aemId");
var aemName = decodeURI(getQueryString("aemName"));
var openId = getQueryString("openId");
var userName = decodeURI(getQueryString("userName"));
//类型 0导出所有节点 1导出有子节点的
var exportType=getQueryString("exportType");;
//aemName="全员营销001";
//userName="马杰";
$(function(){
	initCount();	
	/* $(".activity").html(aemName);
	$(".activity").click(function(){
		window.location.href = path+"/view/ui/aemInfoEditPage?id="+aemId;
	});
	$(".user").html(userName);
	var disseminationUrl = "/view/ui/disseminationActivities?aemId="+aemId+"&aemName="+encodeURI(encodeURI(aemName));
	$(".aem-dissemination").click(function(){
		window.location.hre=disseminationUrl;
	}); */
})
/* $("a[data-toggle='tab']").click(function(){
	if($(this).data("tab")=="tab1"){
		exportType=0;
	}else if($(this).data("tab")=="tab2"){
		exportType=1;
	}
	initCount();
}) */
function initCount(){
	//点击数
	var clickCount=0;
	//分享后数
	var shareCount=0;
	//所有该用户的节点数据
	var pointList;
	//统计数据
	var countUrl = path+"/dissemination/personalCount";
	$.ajax({
			type:"post",
			url:countUrl,
			async: false,
			data:{
				"aemId":aemId,
				"openId":openId
			},
        success:function(data){
        	clickCount=data.data.clickCount;
        	shareCount=data.data.shareCount;
        	pointList= data.data.pointList;
        }
    }); 
	//处理
	if(pointList!=null){
		//计算分享人数
		for(var i=0;i<pointList.length;i++){
			pointData=pointList[i];
			if(StringEmpty(pointData.parentOpenId)&&pointData.parentOpenId==openId){
				shareCount++;
			}
		}
	}
	//初始化统计数
	//$(".share-count").html(shareCount);
	//$(".count-click").html(clickCount);
	//计算分享数  首节点一定为该用户 
	initAllCount(pointList);
}
//初始化统计数据
function initAllCount(data){
	//图表数据
	var webkitDep=null;
	
	//节点
	var nodesData = new Array();
	//节点之间连线
	var linksData = new Array();
	//获取节点的统计数据
	var initPointUrl =path+"/dissemination/personalChart";
	var pointList = null;
	$.ajax({
		type:"post",
		url:initPointUrl,
		async: false,
		data:{
			"aemId":aemId,
			"exportType":exportType,
			"openId":openId
		},
	    success:function(data){
	    	pointList=data.data;
	    }
	});
	//处理
	if(pointList!=null){
		var names = new Array();
		for(var i=0;i<pointList.length;i++){
			var nodes = new Object();
			var links = new Object();
			var point = pointList[i];
			var shareOpenId = point.openId+"";
			if(i==0){
				nodes.symbolSize=20;
				nodes.category=0;
			}else{
				nodes.symbolSize=10;
				nodes.category=1;
			}
			if(i==0){
				nodes.value=point;
				nodes.name=shareOpenId;
				nodesData.push(nodes);
				names.push(shareOpenId);	
			}else if(names.indexOf(shareOpenId)<0){			
				nodes.value=point;
				nodes.name=shareOpenId;
				nodesData.push(nodes);
				names.push(shareOpenId);	
			}				
			links.source=pointList[i].openId;
			links.target=pointList[i].parentOpenId;
			linksData[i]=links;
		}
	} 
	//计算分享人数
	 for(var i=0;i<nodesData.length;i++){
		var shareCount = 0;
		var nodes=nodesData[i].value;
		var parentOpenId=nodes.openId;
		//分享人数去重
		var names = new Array();
		for(var j=0;j<data.length;j++){
			pointData=data[j];
			if(StringEmpty(pointData.parentOpenId)&&pointData.parentOpenId==parentOpenId){
				if(j==0){
    				names.push(pointData.openId);	
    				shareCount++;
    			}else if(names.indexOf(pointData.openId)<0){			
    				names.push(pointData.openId);	
    				shareCount++;
    			}
			}
		}
		nodes.shareCount=shareCount;		
	} 
	$(".show-point").html(nodesData.length);
	webkitDep = {
		    "type": "force",
		    "categories": [//关系网类别，可以写多组
		        {
		            "name": "传播中心",//关系网名称
		            "keyword": {},
		            "itemStyle": {
			                   "normal": {
			                        "color": "#FF892F",
			                   }
			               }
		        },{
		            "name": "传播人",//关系网名称
		            "keyword": {},
		            "itemStyle": {
			                   "normal": {
			                        "color": "#FECE5A",
			                   }
			               }
		        }
		    ],
		    "nodes": nodesData,
		    "links":linksData 
		};
	//初始化图表
	if(exportType==0){
		initAllChart(webkitDep);
	}else{
		//初始化图表
		var temp = new initChildChart(webkitDep);
	    temp.resize();
	}
}
//判断是否在数组中
function isInArray(arr,value){
    if(arr.indexOf&&typeof(arr.indexOf)=='function'){
        var index = arr.indexOf(value);
        if(index >= 0){
            return true;
        }
    }
    return false;
}
//初始化所有传播节点
function initAllChart(webkitDep){
	var allChart = echarts.init($(".point")[0]);
	allChart.showLoading();  
	allChart.hideLoading();   
    allOption = {
            backgroundColor:'#686DA0',
            legend: {
                show:false,
                data: ['传播中心',"传播人"]//此处的数据必须和关系网类别中name相对应
            },
              series: [{
                type: 'graph',
                layout: 'force',
                animation: true,
                nodeScaleRatio:0.6,
                 label: {
                	 normal: {
                        show:true,
                        position: 'bottom',
                        borderRadius:10,
                        backgroundColor:'#fff',
                        borderWidth:20,
                        padding:5,
                        color:'#000',
                       	formatter: function (params, ticket, callback) {
                           	var param =params.value;
                           	var userName="游客";
                           	if(StringEmpty(param)){
                  	              if(StringEmpty(param.nickName)&&param.nickName!="null"){
                  	            	  userName = param.nickName;
                  	              }
                  	             }
                           	var htmlStr = userName;
                           	return htmlStr;
                           }
                	 }
                }, 
                hoverAnimation:true,
                focusNodeAdjacency:true,
                draggable: true,  
                roam : true,
                data: webkitDep.nodes,  
                categories: webkitDep.categories,  
                force: {
                    edgeLength: 105,//连线的长度
                    repulsion: 100  //子节点之间的间距
                },
                edges: webkitDep.links
            }] 
        };
        allChart.setOption(allOption);
}
//初始化子节点
function initChildChart(webkitDep){
	var childChart = echarts.init($(".point")[0]);
	childChart.showLoading();  
	childChart.hideLoading();   
	childOption = {
            backgroundColor:'#686DA0',
            legend: {
                show:false,
                data: ['传播中心',"传播人"]//此处的数据必须和关系网类别中name相对应
            },
            series: [{
                type: 'graph',
                layout: 'force',
                animation: true,
                nodeScaleRatio:0.6,
                 label: {
                	 normal: {
                        show:true,
                        position: 'bottom',
                        borderRadius:10,
                        backgroundColor:'#fff',
                        borderWidth:20,
                        padding:5,
                        color:'#000',
                       	formatter: function (params, ticket, callback) {
                           	var param =params.value;
                           	var userName="游客";
                           	if(StringEmpty(param)){
                  	              if(StringEmpty(param.nickName)&&param.nickName!="null"){
                  	            	  userName = param.nickName;
                  	              }
                  	             }
                           	var htmlStr = userName+"("+param.shareCount+")";
                           	return htmlStr;
                           }
                	 }
                }, 
                draggable: true,  
                data: webkitDep.nodes,  
                categories: webkitDep.categories,  
                force: {
                    edgeLength: 105,//连线的长度
                    repulsion: 100  //子节点之间的间距
                },
                edges: webkitDep.links
            }]
        };
		childChart.setOption(childOption);
}
//判断字符串是否为空
function StringEmpty(content) {
    if (content == undefined || content == "" || content == null) {
        return false;
    } else {
        return true;
    }
}
</script>
</html>